<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>register</title>
<script src="js/jquery-2.2.3.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<link type="text/css" href="css/jquery-ui.min.css" rel="stylesheet">
<link type="text/css" href="css/register.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>
<script src="js/my.js"></script>
<script language = "JavaScript">
    function checkUserName() { //验证用户名
		var fname = document.myform.username.value;
		var reg = /^[0-9a-zA-Z]/;
		if (fname.length != 0) {
			for (i = 0; i < fname.length; i++) {
				if (!reg.test(fname)) {
					alert("只能输入字母或数字");
					return false;
				}
			}
			if (fname.length < 4 || fname.length > 16) {
				alert("只能输入4-16个字符");
				return false;
			}
		} else {
			alert("请输入用户名");
			document.myform.username.focus();
			return false;
		}
		return true;
	}

	function passCheck() { //验证密码
		var userpass = document.myform.password.value;
		if (userpass == "") {
			alert("未输入密码 \n" + "请输入密码");
			document.myform.password.focus();
			return false;
		}
		if (userpass.length < 6 || userpass.length > 12) {
			alert("密码必须在 6-12 个字符。\n");
			return false;
		}
		return true;
	}

	function passCheck2() {
		var p1 = document.myform.password.value;
		var p2 = document.myform.password2.value;
		if (p1 != p2) {
			alert("确认密码与密码输入不一致");
			return false;
		} else {
			return true;
		}
	}

	function checkEmail() {
		var Email = document.getElementById("email").value;
		var e = Email.indexOf("@" && ".");
		if (Email.length != 0) {
			if (e > 0) {
				if (Email.charAt(0) == "@" && ".") {
					alert("符号@和符号.不能再邮件地址第一位");
					return false;
				} else {
					return true;
				}
			} else {
				alert("电子邮件格式不正确\n" + "必须包含@符号和.符号！");
				return false;
			}
		} else {
			alert("请输入电子邮件！");
			return false;
		}
	}

	function checkbirthday() { //验证用户名
		var year = document.myform.birthday.value;
		if (year < 1949 || year > 2007) {
			alert("年份范围从1949-2007年");
			return false;
		}
		return true;
	}

	function validateform() {
		if (checkUserName() && passCheck() && passCheck2() && checkEmail() && checkbirthday()) return true;
		else return false;
	}

	function clearText() {
		document.myform.user.value = "";
		document.myform.password.value = "";
	}

	//显示隐藏对应的switchPwd()方法:
	$(function() {
		// 通过jqurey修改
		$("#passwordeye").click(function() {
			let type = $("#password").attr('type');
			if (type === "password") {
				$("#password").attr("type", "text");
			} else {
				$("#password").attr("type", "password");
			}
		});
		$("#passwordeye2").click(function() {
			let type = $("#password2").attr('type');
			if (type === "password") {
				$("#password2").attr("type", "text");
			} else {
				$("#password2").attr("type", "password");
			}
		});
	});

</script>
</head>
<body>
<img src="img/login_bg.jpg" class="bg">
<div id="head">
	<img src="img/register_head.png" width=100% height=auto />
</div>
<div id="center">
<form name="myform" onSubmit="return validateform( )" enctype="multipart/form-data" action="cgi-bin/register.cgi" method="post" >
	<div class="input-group">
        <h3>用&nbsp;&nbsp;户&nbsp;&nbsp;名：</h3><input class="form-control"  id="username" name="username" type="text"  style="height:40px" value=""  placeholder="只能输入字母或数字，4-16个字符"/>
	</div>		
	<div class="input-group">
        <h3>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：</h3><input class="form-control"  id="password" name="password" type="password" style="height:40px" value=""  placeholder="密码长度6-12位"/>
		<span class="input-group-btn">
			<INPUT class="btn btn-default" id="passwordeye" type="button" value="show/hide"">
        </span>
    </div>
	<div class="input-group">
        <h3>确认密码：</h3><input class="form-control"  id="password2" name="password2" type="password" style="height:40px" value=""/>
		<span class="input-group-btn">
			<INPUT class="btn btn-default" id="passwordeye2" type="button" value="show/hide"">
        </span>
	</div>     
	<div id="btn">
		<INPUT name="registerButton"  class="btn btn-primary" type="submit" id="Button" value="注册"  onclick="checkUserName()">
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;	
		<a href="login.html"><INPUT  class="btn btn-primary" name="loginButton" id="Button" type="button" value="登录"></a>
	</div>
</form>
</div>
<div id="bottom">
	<div class="footer" style="color:white;">
     	Copyright &copy; 2013-2019 All Rights Reserved. 备案号：
    </div>
</div>
</body>
</html>
